<template>
    <el-container class="container">
        <div>
            <el-button type="primary" @click="openAddCategory">新增</el-button>
            <el-button type="primary" @click="loadList">刷新</el-button>
        </div>

        <el-table :data="tableData" stripe style="width: 100%" v-loading="fullscreenLoading">
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="categoryName" label="分类名称" width="180">
                <template #default="scope">
                   {{ scope.row.categoryName }}
                </template>
            </el-table-column>
            <el-table-column prop="categoryAlias" label="描述" />
            <el-table-column fixed="right" label="操作" width="120">
                <template #default>
                    <el-button link type="primary" size="small">删除</el-button>
                    <!-- <el-button link type="primary" size="small">编辑</el-button> -->
                </template>
            </el-table-column>
        </el-table>
    </el-container>
    <el-dialog v-model="showAddCategory" title="新增分类" >
        <el-form :label-position="right" label-width="100px" :model="form" v-loading.fullscreen.lock="fullscreenLoading">
            <el-form-item label="分类名称">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="form.desc" />
            </el-form-item> 
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showAddCategory = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
    import {ref} from 'vue'
import HttpApi from '@/http/index'
    const tableData = ref([])

    const fullscreenLoading = ref(false)

    const form = ref({
        name:'',
        desc:''
    })

    const showAddCategory = ref(false)

    const openAddCategory = ()=>{
        showAddCategory.value = true
        form.value.name = ''
        form.value.desc = ''
    }
    

    const loadList = ()=>{
        //
        
        HttpApi.get("/category/list",{}).then(d=>{
            console.log("dd==>", d)
            tableData.value = d
        })
    }

    loadList()

    const onSubmit = () =>{
      fullscreenLoading.value = true
      HttpApi.post("/category/add",{
        categoryName:form.value.name,
        categoryAlias:form.value.desc
      }).finally(f=>{
         showAddCategory.value = false
          fullscreenLoading.value = false
          loadList()
      })
    }

</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
}
</style>
